<template>
	<view class="box">
		<view class="boxs" @click="$project.toPath('/pages/user/fw?type=2')">

			<view class="f_s">
				<view class="bhui" v-if="!address.id">请输入服务地址</view>
				<view v-else>
					<view><text class="name">{{address.nickname}}</text> <text class="mobile">{{address.mobile}}</text> </view>
					<view class="address">{{address.plot.name}}{{address.floor.name}}{{address.area}}</view>
				</view>
				<view>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>
			</view>

		</view>

		<view class="boxs" @click="setOpen()">

			<view class="f_s">
				
				<view v-if="!timeText" class="bhui">请选择服务时间</view>
				<view v-else>
				<view class="year">{{timeText[0]}}</view>
				<view class="hour">{{timeText[1]}}</view>
				</view>
				
				<view>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>
			</view>

		</view>
		
		<view class="boxs f">
			<image class="img" :src="info.iimage"></image>
			<view class="i_right">
				<view class="f_s">
				 <view>{{info.name}}</view>
				 <view class="money">¥{{info.sku.money}}</view>
				</view>
				<view class="num money">x{{iParm.buy_num}}</view>
				<view class="money">{{info.sku.name}}</view>
				<view class="num total">总额:{{info.total}}</view>
			</view>
		</view>
		
		<view class="boxs" >
		  
		  <textarea placeholder="请输入备注信息" v-model="form.remark" class="te"></textarea>
		
		</view>
		
		<view class="boxs">
			<view>支付方式</view>
			<u-radio-group v-model="form.pay_type" placement="column" activeColor='#FF7133'>
				<view :class="['i_box','f_s',index<payList.length-1?'border':'']" v-for="(item, index) in payList">
					<view class="f_c">
						<view v-if='item.id==1' class="iconfont iconweixinzhifu" style="color:#09BB07;"> </view>
						<view v-if='item.id==2' class="iconfont iconfeiyong" style="color:#FFB92C;"> </view>
						<view class="pay_text">{{item.name}}</view>
						<view class="yu" v-if="item.id==2&&user.money>=0">(可用¥{{user.money}})</view>
					</view>
					<u-radio :disabled="item.id==2&&user.is" :key="index" label=" " :name="item.id">
					</u-radio>
				</view>
			</u-radio-group>
		</view>
		
		<view style="height: 79px;"></view>
		
		<view class="bottom_box f_s">
			<view>
				<view class="pay_money">实付金额:<text class="red">¥{{info.total}}</text></view>
				<view class="f_c">
					<view class="iconfont fs-18" :class="check?'icondanxuanfuxuan':'iconico2'" @click="check=!check"></view>
					<view class="msg">已阅读并同意</view>
					<view class="xy" @click="$project.toPath('/pages/account/treaty?id='+info.xy.id)">{{info.xy.title}}</view>
				</view>
			</view>
			<view class="pay_box" @click="setPay()">
				确认支付
			</view>
		</view>
		 <passkeyborad :show="show" @complte="moneyPay" @close="show=false" :price="payMoney"></passkeyborad>
		<uvdatetimepicker @confirm="timeconfirm" :filter="filter" :minDate="stime" :maxDate="etime"
			:formatter="formatter" ref="datetimePicker" v-model="time" mode="datetime"></uvdatetimepicker>
	</view>
</template>

<script>
	import uvdatetimepicker from "@/uni_modules/uv-datetime-picker/components/uv-datetime-picker/uv-datetime-picker.vue";
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default {
		components: {
			uvdatetimepicker,
			passkeyborad
		},
		data() {
			return {
				stime: '',
				etime: '',
				timeText: '',
				form:{remark:'',pay_type: 1,password:'',fw_time:'',fw_id:'',sku_id:'',buy_num:'',address_id:''},
				address:{id:''},
				iParm:{id:'',sku_id:'',buy_num:''},
				info:{},
				payMoney: 0,
				payList: [{
					id: 1,
					name: '微信支付',
					img: ''
				}, {
					id: 2,
					name: '余额支付',
					img: ''
				}],
				user: {
					money: 0,
					is: true
				},
				check:'',
				showPay:false,
				system: '',
				show:false,
				order:{}
			}
		},
		onShow() {
		
		let address = uni.getStorageSync('address');
		if (address) {
			address = JSON.parse(address);
			console.log(address);
			this.address = address;
		}
			 this.isSetPwd();
		},
		onLoad(e) {
			this.system = uni.getSystemInfoSync().platform;
			if(e.id){
				this.iParm={id:e.id,sku_id:e.sku_id,buy_num:e.buy_num};
				this.form.fw_id=e.id;
				this.form.sku_id=e.sku_id;
				this.form.buy_num=e.buy_num;
			}
		   this.getStime();
		   this.getEtime();
		   this.getInfo();
		   this.getAddress();
		},
		methods: {
			getAddress(){
				let params={token:uni.getStorageSync('userToken'),status:2};
				this.$get(this.$api.aduitInfo,params,res=>{
					let data=res.data;
					if(data.code==1){
						this.address=data.data;
					}
				});
			},
			submit() {
				
				let form = JSON.parse(JSON.stringify(this.form));
				form.token = uni.getStorageSync('userToken');
				form.address_id = this.address.id;
				this.$post(this.$api.forderAdd, form, res => {
					let {
						code,
						data,
						msg
					} = res.data;
					if (code != 1) return this.$Toast(msg);
					this.order = data;
					
					if(data.isPay){
						this.pay();
					}else{
						uni.reLaunch({
							url: '/pages/shopcart/paySuccess?type=2',
							success() {
						
							}
						})
					}
					
					
				});
			},
			pay() {
				let _=this;
				this.$post(this.$api.forderPay, {
					id: this.order.id,
					token: uni.getStorageSync('userToken')
				}, ress => {
					let {
						code,
						data,
						msg
					} = ress.data;
					if (code != 1) return this.$Toast(msg);
			
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							_.$Toast('支付成功');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/shopcart/paySuccess?type=2',
									success() {
			
									}
								})
							}, 500)
			
						},
						fail: function(err) {
							_.$Toast('支付取消');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/shopcart/paySuccess?type=2',
									success() {
										
									}
								})
							}, 500)
						}
					});
				});
			},
			moneyPay(e){
				this.form.password=e;
				this.submit();
			},
			setPay(){
				if(!this.address.id){
					return this.$project.toast('请选择服务地址');
				}
				if(!this.form.fw_time){
					return this.$project.toast('请选择服务时间');
				}
				if(!this.check){
					return this.$project.toast('请确认协议');
				}
				
				if(this.form.pay_type==1){
					this.submit();
				}
				if(this.form.pay_type==2){
					if(this.showPay){
						this.show=true;
					}else{
						this.$showModal('是否设置支付密码', (res) => {
							uni.navigateTo({
								url: '/pages/user/setPay'
							})
						})
						
						return;
					}
				}
				
			},
			isSetPwd() {
				let that = this;
				that.$get(that.$api.userIsset_pay_password, {
					token: uni.getStorageSync('userInfo').token
				}, (res) => {
					this.showPay = res.data.data;
				})
			},
			getUser() {
				let params = {
					token: uni.getStorageSync('userToken')
				}
				this.$get(this.$api.userInfo, params, (res) => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.user.money = data.money;
						if (data.money >= this.payMoney) {
							this.user.is = false;
						} else {
							this.user.is = true;
						}
					}
				})
			},
			getInfo(id) {
				this.$get(this.$api.fwInfo,this.iParm, res => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.info = data;
						this.payMoney = Number(data.total);
						this.getUser();
					}
				});
			},
			
			filter(type, options) {
				if (type === 'hour') {
					let op = [];
					options.forEach(e => {

						if (Number(e) >= 10 && Number(e) <= 20) {
							op.push(e);
						}

					});

					return op;
				}
				return options;
			},
			formatter(type, value) {

				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {


					return `${value}时`



				}
				if (type === 'minute') {
					return `${value}分`
				}
			},
			setOpen() {
				
				this.$refs.datetimePicker.open();
			},
			timeconfirm(e) {
				console.log(e);
				
				let time= this.$project.changeTime(e.value, 3, 2);
				this.timeText = time.split(' ');
				this.form.fw_time=time;
			},
			getStime() {

				// 获取当前时间
				var now = new Date();

				// 设置时间为明天的0时0分
				now.setDate(now.getDate() + 1);
				now.setHours(10, 0, 0, 0); // 设置小时、分钟、秒和毫秒为0

				// 获取时间戳（以毫秒为单位）
				var timestamp = now.getTime();
				this.stime = timestamp;
			},
			getEtime() {

				// 获取当前时间
				var now = new Date();

				// 获取当前月份的下一个月
				var nextMonth = now.getMonth() + 1;
				var nextYear = now.getFullYear();

				// 如果下一个月是12月，则年份需要加1，月份设置为0（表示1月）
				if (nextMonth === 12) {
					nextMonth = 0;
					nextYear++;
				}

				// 创建一个表示下个月第一天的Date对象
				var firstDayOfNextMonth = new Date(nextYear, nextMonth, 1);

				// 获取下个月的天数（根据下个月的第一天计算）
				var daysInNextMonth = new Date(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth() + 1, 0)
					.getDate();

				var lastDayOfNextMonth = new Date(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth(),
					daysInNextMonth);

				// 获取时间戳（以毫秒为单位）
				var timestamp = lastDayOfNextMonth.getTime();
				this.etime = timestamp;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;
		padding: 25rpx;
	}

	.boxs {
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 25rpx;
	}
    .f{
		display: flex;
		justify-content: space-between;
	}
	.f_c {
		display: flex;
		align-items: center;
	}

	.f_s {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bhui {
		color: #848482;
	}
	.name{
		color: black;
		font-size: 34rpx;
		margin-right: 20rpx;
	}
	.mobile{
		color:#8A8A8A;
		font-size: 24rpx;
	}
	.address{
		margin-top: 10rpx;
		color:#8A8A8A;
		font-size: 26rpx;
	}
	.year{
		font-size: 28rpx;
	}
	.hour{
		font-size: 26rpx;
		color:#606060;
		margin-top: 5rpx;
	}
	.img{
		width: 180rpx;
		height: 180rpx;
	}
	.i_right{
		width: 68%;
	}
	.money{
		color: #797979;
		font-size: 24rpx;
	}
	.num{
		text-align: right;
	}
	.total{
		margin-top:30rpx;
		font-size: 26rpx;
	}
	.te {
		height: 80rpx;
		width: 100%;
		background-color:#F6F6F6;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx 20rpx;
	}
	.i_box {
		box-sizing: border-box;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F5F6F7;
		font-size: 28rpx;
	}
	.iconfont {
		margin-right: 10rpx;
		font-size: 40rpx;
	}
	.pay_text{
		color: black;
		font-size:28rpx;
	}
	.yu{
		color:#8A8A8A;
		font-size: 26rpx;
	}
	.pay_box{
		background-color:#EA281C;
		color:white;
	}
	.red{
	 color:#E12617;
	}
	
	.bottom_box{
		position: fixed;
		bottom: 0;
		left:0;
		width: 100%;
		box-sizing: border-box;
		padding:35rpx 30rpx 35rpx 30rpx;
		background-color: white;
	}
	
	.pay_money{
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.pay_box{
		box-sizing: border-box;
		padding:16rpx 45rpx;
		color:white;
		border-radius: 30rpx;
		font-size: 22rpx;
	}
	.icondanxuanfuxuan {
		color: #FF7133 !important;
	}
	.iconfont{
		color:#DADADA;
	}
	.msg{
	color:#7E7E7E;
	font-size: 26rpx;
	}
	.xy{
		color: #FC7632;
		font-size: 26rpx;
	}
</style>